<template>
	<view>
		<view class="container">
			
			<image class="img" src="../../static/tabbar/hong.png">石家庄人民医院</image>
			<view class="navbar-title">石家庄人民医院</view>
		</view>
		
		<view class="uni-search-box">
			<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
				placeholder="搜索科室或医生" />
			
		</view>
		
		<!-- 滚动视图开始 -->
		<view class="classify_wrap">
		<view class="classify_scroll_x">
		    <scroll-view scroll-x="true" >
		      <view class="segmented-wrap">
		        <uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
		      </view>
		    </scroll-view>
		  </view>
		  <view class="classify_icon">
		  				<uni-icons type="list" size="28" color="gray"></uni-icons>
		  			</view>
		  </view>
		<!-- 滚顶视图结束 -->
		<!-- 轮播图开始 -->
		<view class="uni-margin-wrap">
					<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
						<view v-if="error">{{error.message}}</view>
						<view v-else>
							<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
								:duration="duration">
								<swiper-item v-for="(item, index) in data" :key="item._id">
									<view class="swiper-item">
										<image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
									</view>
								</swiper-item>
							</swiper>
						</view>
					</unicloud-db>
				</view>
		<!-- 轮播图结束 -->
		
		<!-- 三块布局开始 -->
		<view class="vip-wrap">
							<uni-card  :thumbnail="vipIcon" margin="0px">
								<uni-grid :column="column" :show-border="false" :square="false">
									<uni-grid-item v-for="(item, index) in vipItem">
										<view class="grid-item-box">
											<image :src="item.icon" style="width: 200rpx; height: 180rpx;" mode="aspectFill"></image>
											<text>{{ item.text }}</text>
										</view>
									</uni-grid-item>
								</uni-grid>
							</uni-card>
						</view>
		
		<!-- 布局结束 -->
		
		<!-- 医生列表开始 -->
		<view v-if="current==0">
		<view class="bookList">
			
			<uni-section title="医生列表" type="line"><button class="button-box" @click="select">切换视图</button></uni-section>
				
				<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"  @load="load" where="department =='内科' ">
					<!-- 基于 uni-list 的页面布局 -->
					<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
						<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
						<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
						<uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="自定义列表" v-for="item in data"
						 :key="item._id" :to="'/pages/detail/detail?id='+item._id+'&title='+item.name">
							<!-- 通过header插槽定义列表左侧图片 -->
							<template v-slot:header>
								<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
									<image :src="item.picture.url" mode="aspectFill"></image>
								</view>
							</template>
							<template v-slot:body>
								<view class="shop">
									<view class="doctorsName">
									  <text>{{item.name}}</text>
									</view>
									<view class="job">
										<text>职称 | {{item.job}}</text>
									</view>
									<view>
										<text>所属科室 | {{item.department}}</text>
									</view>
									<view class="author">
									  <text>主治 | {{ item.main }}</text>
									</view>
									<view class="price">
									  <text class="cheapPrice">挂号费 ￥ {{ getYuan(item.money) }}</text>
									</view>
								</view>
							</template>
							<!-- 通过body插槽定义商品布局 -->
							
						</uni-list-item>
					</uni-list>
					<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
					<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
				</unicloud-db>
			</view>
		</view>
		<!-- 医生列表结束 -->
		<!-- 儿童科开始 -->
		<view v-if="current==1">
			<view class="bookList">
				
				<uni-section title="儿科列表" type="line"><button class="button-box" @click="select">切换视图</button></uni-section>
					
					<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"  @load="load" where="department =='儿童科' ">
						<!-- 基于 uni-list 的页面布局 -->
						<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
							<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
							<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
							<uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="自定义列表" v-for="item in data"
							 :key="item._id" :to="'/pages/detail/detail?id='+item._id+'&title='+item.name">
								<!-- 通过header插槽定义列表左侧图片 -->
								<template v-slot:header>
									<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
										<image :src="item.picture.url" mode="aspectFill"></image>
									</view>
								</template>
								<template v-slot:body>
									<view class="shop">
										<view class="doctorsName">
										  <text>{{item.name}}</text>
										</view>
										<view class="job">
											<text>职称 | {{item.job}}</text>
										</view>
										<view>
											<text>所属科室 | {{item.department}}</text>
										</view>
										<view class="author">
										  <text>主治 | {{ item.main }}</text>
										</view>
										<view class="price">
										  <text class="cheapPrice">挂号费 ￥ {{ getYuan(item.money) }}</text>
										</view>
									</view>
								</template>
								<!-- 通过body插槽定义商品布局 -->
								
							</uni-list-item>
						</uni-list>
						<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
						<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
					</unicloud-db>
				</view>
		</view>
		<!-- 儿童科结束 -->
		<!-- 外科开始 -->
		<view v-if="current==2">
			<view class="bookList">
				
				<uni-section title="医生列表" type="line"><button class="button-box" @click="select">切换视图</button></uni-section>
					
					<unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="formData" :collection="collection"  @load="load" where="department =='外科' ">
						<!-- 基于 uni-list 的页面布局 -->
						<uni-list :class="{ 'uni-list--waterfall': options.waterfall }">
							<!-- 通过 uni-list--waterfall 类决定页面布局方向 -->
							<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
							<uni-list-item :border="!options.waterfall" class="uni-list-item--waterfall" title="自定义列表" v-for="item in data"
							 :key="item._id" :to="'/pages/detail/detail?id='+item._id+'&title='+item.name">
								<!-- 通过header插槽定义列表左侧图片 -->
								<template v-slot:header>
									<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': options.waterfall }">
										<image :src="item.picture.url" mode="aspectFill"></image>
									</view>
								</template>
								<template v-slot:body>
									<view class="shop">
										<view class="doctorsName">
										  <text>{{item.name}}</text>
										</view>
										<view class="job">
											<text>职称 | {{item.job}}</text>
										</view>
										<view>
											<text>所属科室 | {{item.department}}</text>
										</view>
										<view class="author">
										  <text>主治 | {{ item.main }}</text>
										</view>
										<view class="price">
										  <text class="cheapPrice">挂号费 ￥ {{ getYuan(item.money) }}</text>
										</view>
									</view>
								</template>
								<!-- 通过body插槽定义商品布局 -->
								
							</uni-list-item>
						</uni-list>
						<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
						<uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" />
					</unicloud-db>
				</view>
		</view>
		<!-- 外科结束 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorDots: true,
								autoplay: true,
								interval: 2000,
								duration: 500,
								column: 3,
								
									vipItem: [
										{text: '预约挂号', icon: '/static/tabbar/预约挂号.png'},
										{text: '在线问诊', icon: '/static/tabbar/线上问诊.png'},
										{text: '报告查询', icon: '/static/tabbar/信息.png'}
										],
								classify:["内科","儿童科","外科","骨科","泌尿科","心理科"],
								current: 0,
								formData: {
									waterfall: false, // 布局方向切换
									status: 'loading', // 加载状态
									},
									collection: 'doctor'
			}
		},
		methods: {
			goToGrid(){
							uni.switchTab({
								url:'/pages/grid/grid'
							})
						},
						
						getYuan(data){
						        let yuan = Math.floor(data / 100)
						        let fen = data % 100
						        if(fen == 0) fen = "00"
						        return yuan+'.'+fen
						      },
						
							  
						select() {
							  	this.formData.waterfall = !this.formData.waterfall;
							  },
							
							  
						onClickItem(e){
							if(this.current!==e.currentIndex){
								this.current = e.currentIndex
							}
						},
						goToGridPage(){
							uni.navigateTo({
								url:'/pages/grid/grid'
							})
							
						},
						load(data,ended){
							if(ended){
								this.formData.status = 'noMore'
							}
						}
			
		}
	}
</script>

<style lang="scss">
	@import '../../common/uni-ui.scss';
	.img{
		width: 66rpx;
		height: 44rpx;
		float: left;
		
	}
	.navbar-title{
		font-size: 21px;
		margin-top: 40px;
	}
		.uni-margin-wrap{
			margin-top: 5rpx;
		}
		.swiper{
			height: 315rpx;
		}
		.swiper-item{
			width: 750rpx;
			height: 315rpx;
		}
		.uni-bg-red{
			background-color: red;
		}
		.uni-bg-green{
			background-color: green;
		}
		.uni-bg-blue{
			background-color: blue;
		}
			.uni-margin-wrap{
				margin-top: 5rpx;
			}
			.swiper{
				height: 315rpx;
			}
			.banner-image {
				width: 750rpx;
				height: 315rpx;
			}
			
				.grid-item-box {
					text-align: center;
					justify-content: center;
					padding: 10rpx 0 0rpx 0rpx;
					margin: 10rpx;
				}
				.grid-item-box image{
					margin: 0 auto;
				}
				.vip-wrap{
					width: 800rpx;
					height: 300rpx;
				}
		.classify_scroll_x{
				white-space: nowrap;
				width: 650rpx;
				background-color: #FFFFFF;
				margin-top: 5rpx;
				margin-bottom: 8rpx;
			}
			.scroll-view-item_H {
				display: inline-block;
				width: 140rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 12rpx;
				}
			.scroll-view-item_selected{
				border-bottom: 2px solid red;
			}
				
			.page{
				background-color: #EEEEEE;
			}
			.header{
				display: flex;
				flex-direction: row;
				background-color: #FFFFFF;
			}
			
			.classify_wrap {
					width: 750rpx;
					display: flex;
					flex-direction: row;
				}
				.classify_scroll_x{
					white-space: nowrap;
					width: 650rpx;
					background-color: #FFFFFF;
					margin-top: 5rpx;
					margin-bottom: 8rpx;
				}
				.classify_icon{
					display: flex;
					flex: 1;
					background-color: #FFFFFF;
					margin-left: 3rpx;
					margin-top: 5rpx;
					margin-bottom: 8rpx;
				}
				.segmented-wrap{
					width: 1300rpx;
				}
				
				.classify_wrap {
						width: 750rpx;
						display: flex;
						flex-direction: row;
					}
					.classify_scroll_x{
						white-space: nowrap;
						width: 650rpx;
						background-color: #FFFFFF;
						margin-top: 5rpx;
						margin-bottom: 8rpx;
					}
					.classify_icon{
						display: flex;
						flex: 1;
						background-color: #FFFFFF;
						margin-left: 3rpx;
						margin-top: 5rpx;
						margin-bottom: 8rpx;
					}
					.segmented-wrap{
						width: 1300rpx;
					}
					
					
					.doctorsName{
					  font-size: 30rpx;
					  display: -webkit-box;
					  line-height: 1.5em;
					  -webkit-box-orient: vertical;
					  -webkit-line-clamp: 2;
					  overflow: hidden;
					  text-overflow: ellipsis;
					  margin-bottom: 5rpx;
					}
					.author{
					  font-size: 24rpx;
					  white-space: nowrap; /* 禁止换行 */
					  overflow: hidden; /* 隐藏溢出内容 */
					  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
					  word-break: break-all; /* 允许在单词内换行 */
					  margin-bottom: 10rpx;
					  color: #666666;
					}
					.price {
					  display: flex;
					  flex-direction: row;
					  line-height: 40rpx;
					}
					.cheapPrice{
					  font-size: 40rpx;
					  color: #000000;
					}
					.bookPrice{
					  font-size: 24rpx;
					  color: #AAAAAA;
					  text-decoration-line: line-through;
					}
					.button-box {
						height: 30px;
						line-height: 30px;
						font-size: 12px;
						background: #007AFF;
						color: #fff;
					}
					
				/* 最新 */
	
	
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	
	.pages {
		background-color: #FFFFFF;
	}
	
	.header{
		display: flex;
		flex-direction: row;
		padding-left: 10px;
		background-color: #FFFFFF;
	}
	
	.locationName{
		display: flex;
		flex-direction: row;
		height: 50px;
		line-height: 50px;
		font-size: 12px;
	}
	
	.uni-search-bar {
		
		height: 50px;
		width: 580rpx;
		
	}
	.classify_warp{
		width: 750rpx;
		display: flex;
		flex-direction: row;
	}
	
	.classify_score_x{
		white-space: nowrap;
		width: 650rpx;
		background-color: #FFFFFF;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
		
	
	}
	.segmented-warp{
		width:1300rpx;
	}
	
		.uni-margin-wrap{
			margin-top: 5rpx;
		}
		.swiper{
			height: 315rpx;
		}
		.banner-image {
			width: 750rpx;
			height: 315rpx;
		}
		
	
		
	.grad-item-box{
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		font-size: 16px;
		
	
	}	
	.grid-item-box {
			text-align: center;
			justify-content: center;
			padding: 20rpx 0 0 0;
		}
		.grid-item-box image{
			margin: 0 auto;
		}
	
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	
	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 200rpx;
	  height: 200rpx;
	}
	.bookName{
	  font-size: 30rpx;
	  display: -webkit-box;
	  line-height: 1.5em;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  margin-bottom: 5rpx;
	}
	.author{
	  font-size: 24rpx;
	  white-space: nowrap; /* 禁止换行 */
	  overflow: hidden; /* 隐藏溢出内容 */
	  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	  word-break: break-all; /* 允许在单词内换行 */
	  margin-bottom: 10rpx;
	  color: #666666;
	}
	.price {
	  display: flex;
	  flex-direction: row;
	  line-height: 40rpx;
	}
	.cheapPrice{
	  font-size: 40rpx;
	  color: #000000;
	}
	.bookPrice{
	  font-size: 24rpx;
	  color: #AAAAAA;
	  text-decoration-line: line-through;
	}
	.button-box {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		background: #007AFF;
		color: #fff;
	}
	.list {
		.uni-list--waterfall {
	
			/* #ifndef H5 || APP-VUE */
			/* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
			::v-deep .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;
	
				/* #ifdef H5 || APP-VUE */
				 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
				::v-deep
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;
	
					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}
	
				/* #ifndef H5 || APP-VUE */
			}
	
			/* #endif */
		}
	}
	.uni-list--waterfall {
		
		/* #ifndef H5 || APP-VUE */
		 /* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
		::v-deep .uni-list {
			/* #endif */
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 5px;
			box-sizing: border-box;
		
			/* #ifdef H5 || APP-VUE */
			 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
			::v-deep
			/* #endif */
			.uni-list-item--waterfall {
				width: 50%;
				box-sizing: border-box;
		
				.uni-list-item__container {
					padding: 5px;
					flex-direction: column;
				}
			}
		
			/* #ifndef H5 || APP-VUE */
		}
		
		/* #endif */
	}
	
	.shop {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.shop-picture-column {
		width: 100%;
		height: 170px;
		margin-bottom: 10px;
	}
	.shop-picture {
		width: 110px;
		height: 110px;
	}
	.shop-price {
		margin-top: 5px;
		font-size: 12px;
		color: #ff5a5f;
	}
	.shop-price-text {
		font-size: 16px;
	}
	

</style>